<template>
	<view style="min-height: 100vh;background-color: white;">
		<view class="activeBoxs">
			<view class="activeBox">
				<view class="flex">
					<view class="avatar">
						<image src="../../static/test/userheader.jpg" mode="widthFix"></image>
					</view>
					<view
						style="margin-left: 20rpx;height: 90rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view style="color:#000;font-size:26rpx;">单身美女</view>
						<view style="color:#999;font-size:22rpx;">主播・模特・演员</view>
					</view>
				</view>
				<view style="font-size:18rpx;color:#CCC">
					400米・在线
				</view>
			</view>
			<view class="contentBox">
				上午的时间就白白浪费了，一分钟也没挣到，中午的饭怎么办呀
			</view>
			<!-- 图片 -->
			<!-- 			<view class="activePhotos">
				<view class="activePhoto" v-for="i in 5">
					<image src="/static/test/userheader.jpg" mode="aspectFit"></image>
				</view>
			</view> -->
			<!-- 视频 -->
			<view class="activePhotos">
				<view class="videoBox" @click.stop>
					<video :id="item.id" style="width: 100%;" object-fit="cover"
						src="https://ffa.firstui.cn/uploadfile/241008103906455.mp4"></video>
				</view>
			</view>
			<!-- 状态 -->
			<view class="stateBox">
				<view style="font-size:22rpx;color:#B0B0B0">
					今天在线・保定市・小区
				</view>
			</view>
			<!-- 点赞评论等按钮 -->
			<view class="" style="padding-top: 30rpx;">
				<view class="flex" style="justify-content: space-between;">
					<view class="flex">
						<!-- 点赞 -->
						<view class="flex btnBox">
							<fui-icon name="fabulous" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								2
							</view>
						</view>
						<!-- 评论 -->
						<view class="flex btnBox">
							<fui-icon name="edit" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								评论
							</view>
						</view>
						<!-- 打招呼 -->
						<view class="flex btnBox">
							<fui-icon name="message" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								打招呼
							</view>
						</view>
					</view>
					<!-- 更多 -->
					<view class="">
						<fui-icon name="operate" color="#B0B0B0" size="50"></fui-icon>
					</view>
				</view>
			</view>
			<!-- 评论列表 -->
			<view class="" style="padding: 20rpx 0rpx;">
				<view class="commentBox" v-for="item in 5 " :key="item">
					<view class="flex" style="justify-content: space-between;align-items: flex-start;">
						<view class="flex" style="align-items: flex-start; width: 80%;justify-content: space-between;">
							<view class="fImgBox">
								<image src="../../static/indexad/wx.png" mode=""></image>
							</view>
							<view class="">
								<view class="textSize">
									单身美女
								</view>
								<view class="fCommentBox">
									哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
								</view>
								<view class="textSize">
									24天前·<text>回复</text>
								</view>
							</view>
						</view>
						<view class="" style="width: 10%">
							<view class="flex" style="justify-content: center;flex-direction: column;">
								<!-- <fui-icon name="fabulous"></fui-icon> -->
								<fui-icon name="fabulous-fill" color="#465CFF" size="40"></fui-icon>
								<view class="textSize">
									123
								</view>
							</view>
						</view>
					</view>
					<view class="flex sonBox" style="justify-content: space-between;padding-left: 60rpx;"
						v-for="item in 10 " :key="item">
						<view class="flex" style="align-items: flex-start; width: 80%;justify-content: space-between;">
							<view class="sImgBox">
								<image src="../../static/indexad/dy.png" mode=""></image>
							</view>
							<view class="">
								<view class="textSize">
									喜闻乐见
								</view>
								<view class="sCommentBox">
									论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
								</view>
								<view class="textSize">
									10天前·<text>回复</text>
								</view>
							</view>
						</view>
						<view class="" style="width: 10%;">
							<view class="flex" style="justify-content: center;flex-direction: column;">
								<!-- <fui-icon name="fabulous"></fui-icon> -->
								<fui-icon name="fabulous-fill" color="#465CFF" size="40"></fui-icon>
								<view class="textSize">
									10
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.textSize {
		font-size: 28rpx;
		color: #B0B0B0;
	}

	.fCommentBox {
		padding: 20rpx 0rpx;
		font-size: 28rpx;
	}

	.videoBox {
		width: 100%;
		height: 100%;
	}

	.sCommentBox {
		padding: 15rpx 0rpx;
		font-size: 26rpx;
	}

	.fImgBox {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		margin-right: 20rpx;

		image {
			width: 70rpx;
			border-radius: 100%;
			height: 70rpx;
		}
	}

	.sImgBox {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx;
		border-radius: 100%;

		image {
			width: 60rpx;
			border-radius: 100%;
			height: 60rpx;
		}
	}

	.commentBox {
		padding: 20rpx 0rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #d6d6d6;
	}

	.sonBox {
		align-items: flex-start;
		padding: 20rpx 0rpx;
	}

	.btnBox {
		margin-right: 80rpx;
	}

	.activeBoxs {
		padding: 20rpx;
		background-color: white;
		border-top: 10rpx solid #F9F9F9;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100%;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
		}
	}

	.contentBox {
		padding: 30rpx 0rpx;
		font-size: 26rpx;
	}


	.activePhotos {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 0rpx;
		padding-top: 5rpx;
	}

	.activePhoto {
		width: 220rpx;
		height: 220rpx;
		background-color: #CCC;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;

		image {
			border-radius: 10rpx;
			width: 100% !important;
			height: 100% !important;
		}
	}


	.activeBox {
		margin-top: 10rpx;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// border-bottom: 4rpx solid #f6f6f6;
	}
</style>